<template>
  <!-- 催收执行页-案件信息模块-还款计划 -->
  <section class="component repayment-plan">
    <data-box :data="dataSet" hiddenIndex>
      <template slot="columns">
        <el-table-column prop="payPeriod" label="期数" :min-width="$helper.getColumnWidth(2)"></el-table-column>
        <el-table-column prop="shouldRepayDate" label="还款日期" :formatter="row => $filter.dateTimeFormat(row.shouldRepayDate)" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="payAmount" label="应还金额" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="payPrincipal" label="应还本金" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="payInterest" label="应还利息" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="payFine" label="应还罚息" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="payPlatformFee" label="应还管理费" :min-width="$helper.getColumnWidth(4)"></el-table-column>
        <el-table-column prop="latePayment" label="应还滞纳金" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="payLiquidated" label="其他费用" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="overdueDays" label="逾期天数" :min-width="$helper.getColumnWidth(2)"></el-table-column>
        <!-- <el-table-column prop="payDate" label="实际还款日期" :min-width="$helper.getColumnWidth(3)" :formatter="row => $filter.dateTimeFormat(row.payDate)"></el-table-column> -->
        <el-table-column prop="payDate" label="还款日" :min-width="$helper.getColumnWidth(3)" ></el-table-column>
        <el-table-column prop="hasPayAmount" label="实际还款金额" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="repaymentStatus" label="本期还款状态" :min-width="$helper.getColumnWidth(3)"></el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from "~/core/decorator";

import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { Emit, Prop, Watch } from "vue-property-decorator";
import ViewAttachList from "~/components/common/view-attach-list.vue";
import { namespace } from "vuex-class";
import { PageService } from '~/utils/page.service';
const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {

    ViewAttachList
  },
})
export default class RepaymentPlan extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(CaseOperatorPageService) private caseOperatorPageService: CaseOperatorPageService;
  @CollectionExecutionModule.State private caseId: string;

  private dataSet: any[] = [];
  private fileDataSet: any[] = []
  private dialog = {
    fileList: false
  }

  private fileIds: string = ""

  public queryInfo(id: string) {
    this.caseOperatorPageService.queryRepaymentPlan(id, this.pageService).subscribe(
      data => this.dataSet = data
    )
  }

  private activated() {
    if (this.caseId) this.queryInfo(this.caseId)
  }

}
</script>

<style lang="less" scoped>
</style>
